<template>
  <!-- 轮播图 -->
  <view>
    <view class="swiper_wrap">
      <swiper indicator-dots autoplay circular indicator-active-color="#ea4350">
        <swiper-item
          v-for="(item, index) in goodsDetail.pics"
          :key="index"
          @click="previewImage(item.pics_mid_url)"
        >
          <image :src="item.pics_mid_url" mode="widthFix"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 商品信息 -->
    <view class="goods_info" v-if="goodsDetail">
      <view class="info">
        <view class="price">￥{{ goodsDetail.goods_price }}</view>
        <view class="icon">
          <view class="iconfont icon-yixianshi-">
            <button open-type="share"></button>
          </view>
          <view class="iconfont icon-shoucang" style="color:red"></view>
        </view>
      </view>
      <div class="title">
        {{ goodsDetail.goods_name }}
      </div>
    </view>
    <!-- 图文详情 -->
    <view class="goods_details">
      <view class="title">图文详情</view>
      <view class="content">
        <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
      </view>
    </view>
    <!-- 底部工具栏 -->
    <view class="btm_tool">
      <view class="iconfont icon-kefu">
        <view class="info">联系客服</view>
        <button class="but-kf" open-type="contact">客服</button>
      </view>
      <navigator open-type="switchTab" url="/pages/cart/index">
        <view class="iconfont icon-gouwuche">
          <view class="info">购物车</view></view
        >
      </navigator>
      <view class="but_bom" @click="hancdlAdd">加入购物车</view>
      <view class="but_bom">立即购买</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsDetail: null,
    };
  },
  onLoad(options) {
    // console.log(this.request);
    this.getDetail(options.goods_id || 33791);
  },
  methods: {
    // 获取商品详情数据
    async getDetail(id) {
      const res = await this.request({
        url: "/goods/detail",
        data: {
          goods_id: id,
        },
      });
      this.goodsDetail = res;
    },
    // 预览图片pics_mid_url
    previewImage(url) {
      console.log(url);
      const urls = this.goodsDetail.pics.map((urls) => {
        return urls.pics_mid_url;
      });
      uni.previewImage({
        current: url, // 当前显示图片的http链接
        urls: urls, // 需要预览的图片http链接列表
      });
    },
    // 加入购物车
    hancdlAdd() {
      const carts = wx.getStorageSync("carts") || [];
      const index = carts.findIndex(
        (item) => item.goods_id === this.goodsDetail.goods_id
      );
      console.log(index);
      if (index === -1) {
        // 1. 商品不存在，把当前商品对象添加到购物车数组中
        console.log("第一次购买该商品");
        // 添加属性方便在购物车页面使用
        this.goodsDetail.checked = true;
        // 初始化商品数量为一
        this.goodsDetail.count = 1;
        // 把商品添加到购物车的数组中去
        carts.unshift(this.goodsDetail);
      } else {
        console.log("已经存在商品数量累加");
        carts[index].count++;
        console.log(carts[index].count);
      }
      // 需要将数组重新存入到缓存中
      wx.setStorageSync("carts", carts);
      wx.showToast({
        title: "加入购物车成功",
        mask: true,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  swiper {
    width: 500rpx;
    height: 500rpx;
  }
}
.goods_info {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .price {
    color: $theme-color;
    padding-bottom: 10rpx;
  }
  .icon {
    display: flex;
    align-items: center;
    .iconfont {
      font-size: 38rpx;
      margin: 10rpx;
    }
  }
  .title {
    font-size: 30rpx;
    height: 84rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .icon-yixianshi- {
    position: relative;
    width: 35rpx;
    height: 35rpx;
    button {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
}
.goods_details {
  padding: 20rpx;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    color: $theme-color;
    font-size: 32rpx;
    font-weight: 600;
  }
}
.btm_tool {
  display: flex;
  align-items: center;
  width: 100vw;
  height: 94rpx;
  border-top: 1rpx solid #ccc;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  justify-content: space-between;
  padding: 1 40rpx;
  .icon-kefu {
    position: relative;
  }

  .iconfont {
    text-align: center;
    font-weight: 700;
    font-size: 30rpx;
    flex: 4;

    .but-kf {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
    }
    .info {
      font-size: 24rpx;
      font-weight: 400;
    }
  }
  .but_bom {
    flex: 6;
    text-align: center;
    font-size: 26rpx;
    width: 196rpx;
    height: 60rpx;
    line-height: 60rpx;
    background-color: #fcaa23;
    border-radius: 30rpx;
    color: #fff;
    &:last-child {
      background-color: #ea4350;
      margin-left: 30rpx;
    }
  }
}
</style>
